<template>
  <view class="card-box">
    <view class="title">
      <view class="text">{{ data.supplierName }}</view>
      <view class="sub-text">{{ data.proName }}｜{{ data.proPrice }}元/吨</view>
    </view>
    <view class="table">
      <view>
        <view>发热量</view>
        <view>{{ data.calorificValue || 0 }}</view>
      </view>
      <view>
        <view>灰分(Ad%)</view>
        <view>{{ data.ashContent || 0 }}</view>
      </view>
      <view>
        <view>硫分(St,d%)</view>
        <view>{{ data.sulfurContent || 0 }}</view>
      </view>
      <view>
        <view>水分(Mt%)</view>
        <view>{{ data.hydration || 0 }}</view>
      </view>
      <view>
        <view>挥发分(Vdaf%)</view>
        <view>{{ data.volatileMatter || 0 }}</view>
      </view>
    </view>
    <view class="footer-box">
      <text claas="time">化验单</text>
      <image class="image" v-if="data.assayReport" @click="clickImg(data.assayReport.url)" :src="data.assayReport.url">
      </image>
    </view>
    <view class="footer-box">
      <text claas="time">更新时间</text>
      <text class="time">{{ data.updateTime }}</text>
    </view>
  </view>
</template>
<script>
  export default {
    name: 'product-card',
    props: {
      data: {
        type: Object,
        value: {}
      }
    },
    methods: {
      clickImg(url) {
        uni.previewImage({
          urls: [url]
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .card-box {
    padding: 26.67rpx 17.78rpx;
    border-radius: 17.78rpx;
    background-color: #ffffff;
    box-shadow: 0 0 17.78rpx rgba(0, 0, 0, 0.1);

    >view+view {
      margin-top: 26.67rpx;
    }

    .title {
      display: flex;
      justify-content: space-between;

      .text {
        font-size: 32rpx;
        font-weight: bold;
      }

      .sub-text {
        color: #333333;
        font-size: 24.89rpx;
      }
    }

    .table {
      display: flex;
      padding: 8rpx 0;
      border-radius: 7.11rpx;
      background-color: #f1f2f5;

      >view {
        padding: 0 28rpx;

        >view:first-child {
          text-align: center;
          line-height: 39.11rpx;
          font-size: 17.78rpx;
          color: #999999;
        }

        >view:nth-child(2) {
          text-align: center;
          font-size: 24.89rpx;
          line-height: 39.11rpx;
          font-weight: 700;
          color: #333333;
        }
      }
    }

    .footer-box {
      display: flex;
      justify-content: space-between;

      .time {
        color: #999999;
      }

      .link {
        color: #409efe;
        cursor: pointer;
      }

      image {
        width: 266.67rpx !important;
        height: 160rpx !important;
      }
    }
  }
</style>